<template>
	<view class="container">
		<!-- 固定部分的容器 -->
		<view class="fixed-content">
			<!-- 第一部分：进度条 -->
			<view class="progress-section">
				<uni-steps class="steps-box" :options="stepsOptions" :active="currentStep" activeColor="#2979ff" />
			</view>
			
		</view>
		<!-- 第二部分：已选择项目展示 -->
		<view class="selected-project" v-if="classActive">
			<view class="section-title">
				<text class="title-text">已选择项目</text>
			</view>
			<view 
				class="project-info uni-row" 
				v-for="(item, index) in selectedProject"
				:key="index">
				<view class="info-row flex-item">
					<text class="info-content">{{ item.name }}</text>
				</view>
				<view class="info-row flex-item" style="text-align: right;">
					<text class="info-price">¥{{ item.market_price }}</text>
				</view>
			</view>
			<view style="margin-top: 10rpx;">
				<text style="text-align: right;">小计：<text class="info-price">¥{{totalPrice.toFixed(2)}}</text></text>
			</view>
		</view>
		<!-- 滚动部分的容器 -->
		<view class="scroll-content">
			<!-- 第三部分：项目列表 -->
			<view class="project-list" >
				<view class="section-title">
					<text class="title-text">项目列表</text>
				</view>
				<scroll-view class="list-scroll" >
					<view class="list-content">
						<view v-if="isLoading" class="loading-container">
							<uni-load-more status="loading" />
						</view>
						<view v-else>
							<view 
								class="project-item uni-row" 
								v-for="(item, index) in projectList" 
								:key="index"
								@click="selectProject(item)"
								:class="{'active': selectedProject && selectedProject.name === item.name}"
							>
								<view class="flex-item"><text class="project-name" style="float: left;"> {{index +1 }} {{item.name}}</text></view>
								<view class="flex-item"><text class="project-arrow">›</text></view>
								
								
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 将按钮移到滚动内容区域内 -->
			<view class="footer">
				<button class="next-btn" type="primary" @click="nextStep" :disabled="!selectedProject">下一步</button>
			</view>
			<view style="text-align: center;margin-bottom: 20rpx;"><a @click="toResult()">查询结果</a></view>
		</view>
	</view>
</template>

<script>
	// import uniSteps from '@/uni_modules/uni-steps/components/uni-steps/uni-steps.vue';
	import {
		getProjectList
	} from '@/api/detection.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(['isLogin', 'viewColor', 'uid','routeError']),
		data() {
			return {
				currentStep: 0,
				classActive: false,
				stepsOptions: [{
					title: '选择项目'
				}, {
					title: '填写信息'
				}, {
					title: '确认'
				}],
				selectedProject: [],
				projectList: [],
				isLoading: true,
				code: '',
				unionid: "",
				totalPrice: 0.00,
			}
		},
		onLoad() {
			this.getProjectList()
		},
		methods: {
			// 获取项目列表数据
			getProjectList() {
				// this.isLoading = true
				let that = this;
				getProjectList().then(res => {
					uni.stopPullDownRefresh();
					this.isLoading = false
					that.projectList = res.data;
				});
			},
			selectProject(project) {
				// 如果点击的是已选中的项目，则取消选中
				console.log(project.id, "选中项目");
				this.classActive = true;
				// let is_list = this.is_list
				if (this.selectedProject.indexOf(project) == -1) {
					// this.is_list.push(project.id)
					this.selectedProject.push(project);
					this.totalPrice = Number(this.totalPrice) + Number(project.market_price)
				} else {
					// this.is_list.splice(is_list.indexOf(project.id),1);
					this.selectedProject.splice(this.selectedProject.indexOf(project),1);
					this.totalPrice = Number(this.totalPrice) - Number(project.market_price)
				}
				// console.log(is_list, "1111")
				if(this.selectedProject.length == 0) {
					this.classActive = false;
				}
				console.log(this.selectedProject, "已选择的项目")
				
			},
			// 添加下一步方法
			nextStep() {
				if (this.selectedProject.length == 0) {
					uni.showToast({
						title: '请先选择项目',
						icon: 'none'
					})
					return
				}
				uni.setStorageSync('projectInfo', this.selectedProject)
				uni.setStorageSync('totalPrice', this.totalPrice)
				if (this.currentStep < 2) {
					// 跳转到填写信息页面
					uni.navigateTo({
						url: '/pages/shops/detection/userInfo/userInfo'
					});
				}
			},
			// toResult() {
			// 	uni.navigateTo({
			// 		url: '/pages/search/index'
			// 	});
			// },
		}
	}
</script>

<style>
	.container {
		padding: 0 20rpx;
	/* 	position: relative;
		min-height: 100vh; */
		background-color: #f8f8f8;
	}
	
	/* 固定内容样式 */
	.fixed-content {
/* 		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1; */
		/* padding: 20rpx; */
		background-color: #f8f8f8;
	}
	
	/* 滚动内容样式 */
	.scroll-content {
		padding-top: calc(0rpx + (var(--selected-height, 0)));
	}
	
	/* 进度条样式 */
	.progress-section {
		margin-bottom: 20rpx;
		margin-top: 10rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.steps-box {
		padding: 30rpx 20rpx;
	}
	
	:deep(.uni-steps-item) {
		transform: scale(1.2);
	}
	
	:deep(.uni-steps-item-circle-container) {
		width: 44px;
		height: 44px;
	}
	
	:deep(.uni-steps-item-title) {
		font-size: 28rpx;
		font-weight: 500;
	}
	
	/* 通用标题样式 */
	.section-title {
		margin-bottom: 24rpx;
		padding: 0 20rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		position: relative;
		padding-left: 24rpx;
	}
	
	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 28rpx;
		background-color: #2979ff;
		border-radius: 3rpx;
	}
	
	/* 已选择项目样式 */
	.selected-project {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;  /* 减小底部间距 */
		border-radius: 16rpx;
		/* margin-top: 185rpx; */
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.project-info {
		padding: 10rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		display: flex;
		/* border-bottom: 1px solid #eee; */
	}
	
	.info-row {
		margin-bottom: 10rpx;
		/* padding-bottom: 20rpx; */
		width: 50%;
	}
	
	.info-row:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
		display: block;
	}
	
	.info-content {
		font-size: 24rpx;
		color: #333;
		line-height: 1.5;
		font-weight: 700;
	}
	
	.info-content.notice {
		color: #666;
		font-size: 28rpx;
		white-space: pre-line; /* 保留换行符 */
	}
	
	.info-price {
		font-size: 24rpx;
		color: #ff6b6b;
		font-weight: 600;
		text-align: right;
	}
	
	/* 项目列表样式 */
	.project-list {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
	}
	
	.project-list-margin {
		margin-top: 200rpx;
	}
	
	/* 添加滚动区域样式 */
	.list-scroll {
		flex: 1;
		height: 600rpx;
	}
	
	.list-content {
		padding: 0 20rpx;
	}
	
	.project-item {
		padding: 32rpx 24rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: all 0.3s;
	}
	
	.project-item:active {
		background-color: #f5f5f5;
	}
	
	.project-item.active {
		background-color: #f0f7ff;
	}
	
	.project-name {
		font-size: 30rpx;
		color: #333;
		flex: 1;
		text-align: left;
		font-weight: bold;
	}
	
	.project-arrow {
		color: #999;
		font-size: 40rpx;
		margin-left: 20rpx;
		flex-shrink: 0;
	}
	
	.project-item:last-child {
		border-bottom: none;
	}
	
	/* 底部按钮样式 */
	.footer {
		padding: 40rpx;
		margin-top: 40rpx;  /* 添加上边距 */
		margin-bottom: 20rpx;  /* 添加下边距 */
	}
	
	.next-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		background: linear-gradient(to right, #2979ff, #5e96ff);
		transition: all 0.3s;
	}
	
	.next-btn[disabled] {
		background: #cccccc;
		opacity: 0.8;
	}
	
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
	}
</style>
